
<div class="easyui-layout" data-options="fit:true">
    <!-- Begin of toolbar -->
    <div id="wu-toolbar-2">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
        </div>
        <div class="wu-toolbar-search">
            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
            <label>用户组：</label>
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="0">选择用户组</option>
                <option value="1">黄钻</option>
                <option value="2">红钻</option>
                <option value="3">蓝钻</option>
            </select>
            <label for="search">关键词：</label>
            <input id="search" class="wu-text" style="width:100px">
            <a href="javascript:;" id="jiansuo" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
        </div>
    </div>
    <!-- End of toolbar -->
    <table id="wu-datagrid-2" class="easyui-datagrid" toolbar="#wu-toolbar-2"></table>
</div>
<!-- Begin of easyui-dialog -->
<div id="wu-dialog-2" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
	<form id="wu-form-2" method="post">
        <table>
            <tr>
                <td width="60" align="right">姓 名:</td>
                <td><input type="text" name="name" class="wu-text wu-text0" /></td>
            </tr>
            <tr>
                <td align="right">密 码:</td>
                <td><input type="text" name="password" id="password" class="wu-text wu-text1 easyui-passwordbox" prompt="Password" iconWidth="28"/></td>
            </tr>
            <tr>
                <td align="right">邮 箱:</td>
                <td><input type="text" name="mail" class="wu-text wu-text2" /></td>
            </tr>
            <tr>
                <td align="right">城 市:</td>
                <td><input type="text" name="city" class="wu-text wu-text3" /></td>
            </tr>
            <tr>
                <td valign="top" align="right">描 述:</td>
                <td><textarea name="desc" rows="6" class="wu-textarea wu-text4" style="width:260px"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<!-- End of easyui-dialog -->
<script type="text/javascript">

	/**
	* Name 载入数据
	*/
	$('#wu-datagrid-2').datagrid({
		url:'http://localhost:3000/users/list',
		method:'post',
		loadFilter:pagerFilter,
		rownumbers:true,
		singleSelect:false,
		pageSize:20,
		pagination:true,
		multiSort:true,
		fitColumns:true,
		fit:true,
		columns:[[
			{ checkbox:true},
			{ field:'name',title:'姓名',width:80,sortable:true},
			{ field:'password',title:'密码',width:80,sortable:true},
			{ field:'mail',title:'邮箱',width:80},
			{ field:'city',title:'城市',width:80},
			{ field:'desc',title:'描述',width:80},
			{ field:'date',title:'日期',width:140},
			{field:'operate',title:'管理', width:00,
				formatter: function(value,row,index){
					return '<a href="javascript:void(0)" class="easyui-linkbutton editcls" style="padding-right:15px;" onclick="editUser(\''+ row._id+'\')">编辑</a>'+
				'<a href="javascript:void(0)" class="easyui-linkbutton remove" onclick="deleUser(\''+ row._id+'\')">删除</a>'
				}
			}
		]],
        onLoadSuccess:function(data){
            $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'});
            $('.remove').linkbutton({text:'删除',plain:true,iconCls:'icon-remove'});
        }
	});



	//搜索框
	var bstop=true;
	$('#jiansuo').on('click',function(){
		var id=$('#search').val();
		bstop=true;
		$.ajax({
	    	type:"post",
			url:"http://localhost:3000/users/all"
	    }).then(function(res){
	    	var sum=0;
            var yi;
	    	for(var i=0;i<res.length;i++){
	    		if(res[i].name==id || res[i].city==id || res[i].desc==id){
	    			yi=i+1;
	    			sum++;
	    			$('#wu-dialog-2').dialog({
						closed: false,
						modal:true,
			            title: "信 息",
			            buttons: [{
			                text: '确定',
			                iconCls: 'icon-ok',
			                handler: function () {
			                    $('#wu-dialog-2').dialog('close');
			                }
			            }, {
			                text: '取消',
			                iconCls: 'icon-cancel',
			                handler: function () {
			                    $('#wu-dialog-2').dialog('close');
			                }
			            }]
			        });
	    			$(".wu-text0").val(res[i].name);
					$(".wu-text1").val(res[i].password);
					$(".wu-text2").val(res[i].mail);
					$(".wu-text3").val(res[i].city);
					$(".wu-text4").val(res[i].desc);
					bstop=false;
	    		}
	    	}
	    	if(sum>0)alert('一共找到'+sum+'条记录，您要找的数据在第'+yi+'行！');
	    	if(bstop){
	    		alert('不在查询范围！搜索关键字：姓名、城市、描述。');
	    		bstop=false;
	    	}
	    })
	})
	


	/**
	* Name 添加记录
	*/
	function add(){
		var formData = $('#wu-form-2').serializeJSON();
		$.ajax({
			type:"post",
			url:"http://localhost:3000/users/data",
			data: formData
		}).then(function(res){
			if(res){
				$.messager.alert('信息提示','提交成功！','info');
				$('#wu-datagrid-2').datagrid('reload');
				$('#wu-dialog-2').dialog('close');
			}
			else
			{
				$.messager.alert('信息提示','提交失败！','info');
			}
		})
	}
	
	/**
	* Name 删除记录
	*/
	function remove(){
		$.messager.confirm('信息提示','确定要删除该记录？', function(result){
			if(result){
				var items = $('#wu-datagrid-2').datagrid('getSelected');
				if(items){
					var node = $('#wu-datagrid-2').datagrid('getSelected');
					var id=node._id;
					$.ajax({
						type:"delete",
						url:"http://localhost:3000/users/data/"+ id
					}).then(function(res){
						if(res){
							$.messager.alert('信息提示','删除成功！','info');
							$('#wu-datagrid-2').datagrid('reload');
						}else{
							$.messager.alert('信息提示','删除失败！','info');
						}
					});
				}else{
					$.messager.alert('信息提示','请选中删除项！','info');
				}
			}
		});
	}
	
	/**
	* Name 打开添加窗口
	*/
	function openAdd(){
		$('#wu-form-2').form('clear');
		$('#wu-dialog-2').dialog({
			closed: false,
			modal:true,
            title: "添加信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: add
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-2').dialog('close');
                }
            }]
        });
	}
	
	/**
	* Name 打开修改窗口
	*/
	
	function openEdit(){
		var item = $('#wu-datagrid-2').datagrid('getSelections');
		if(item.length>1){
			alert('不能同时修改多个');
		}else{
			$("#wu-form-2").form("clear");
			$('#wu-dialog-2').dialog({
				closed: false,
				modal:true,
	            title: "修改信息",
	            buttons: [{
	                text: '确定',
	                iconCls: 'icon-ok',
	                handler: userAddAction
	            }, {
	                text: '取消',
	                iconCls: 'icon-cancel',
	                handler: function () {
	                    $('#wu-dialog-2').dialog('close');
	                }
	            }]
	        });
	        var node = $('#wu-datagrid-2').datagrid('getSelected');
			var id=node._id;
			console.log(id)
	        $.ajax({
				type:"post",
				url:"http://localhost:3000/users/data/"+id
			}).then(function(res){
				$(".wu-text0").val(node.name);
				$(".wu-text1").val(node.password);
				$(".wu-text2").val(node.mail);
				$(".wu-text3").val(node.city);
				$(".wu-text4").val(node.desc);
			})
		}
	}
	function userAddAction(id){
		var node = $('#wu-datagrid-2').datagrid('getSelected');
		var id=node._id;
		var postUrl;
		if($(".wu-text").val()){
			$(".wu-text0").val(node.name);
			$(".wu-text1").val(node.password);
			$(".wu-text2").val(node.mail);
			$(".wu-text3").val(node.city);
			$(".wu-text4").val(node.desc);
		}else{
			$(".wu-text0").val();
			$(".wu-text1").val();
			$(".wu-text2").val();
			$(".wu-text3").val();
			$(".wu-text4").val();
		}
		var formData = $('#wu-form-2').serializeJSON();
		$.ajax({
			type:"post",
			url:"http://localhost:3000/users/data/"+id,
			data: formData
		}).then(function(res){
			$('#wu-datagrid-2').datagrid('reload');
			$('#wu-dialog-2').dialog('close');
		})
	}



	function reload(){
		$('#wu-datagrid-2').datagrid('reload');
	}


	/**
	* Name 分页过滤器
	*/
	function pagerFilter(data){
		if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
			data = {
				total: data.length,
				rows: data
			}
		}
		var dg = $(this);
		var opts = dg.datagrid('options');
		var pager = dg.datagrid('getPager');
		pager.pagination({
			onSelectPage:function(pageNum, pageSize){
				opts.pageNumber = pageNum;
				opts.pageSize = pageSize;
				pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});
				dg.datagrid('loadData',data);
			}
		});
		if (!data.originalRows){
			data.originalRows = (data.rows);
		}
		var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
		var end = start + parseInt(opts.pageSize);
		data.rows = (data.originalRows.slice(start, end));
		return data;
	}



	function editUser(id){
	$("#wu-form-2").form("clear");
		$('#wu-dialog-2').dialog({
			closed: false,
			modal:true,
            title: "修改信息",
            buttons: [{
                text: '确定',
                iconCls: 'icon-ok',
                handler: userAddAction
            }, {
                text: '取消',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#wu-dialog-2').dialog('close');
                }
            }]
        });
        $.ajax({
        	type:"post",
			url:"http://localhost:3000/users/all"
        }).then(function(res){
        	for(var i=0;i<res.length;i++){
        		if(res[i]._id==id){
        			$(".wu-text0").val(res[i].name);
					$(".wu-text1").val(res[i].password);
					$(".wu-text2").val(res[i].mail);
					$(".wu-text3").val(res[i].city);
					$(".wu-text4").val(res[i].desc);
        		}
        	}
        })
	}
	function userAddAction(id){
		var node = $('#wu-datagrid-2').datagrid('getSelected');
		var id=node._id;
		var postUrl;
		var formData = $('#wu-form-2').serializeJSON();
		$.ajax({
			type:"post",
			url:"http://localhost:3000/users/data/"+id,
			data: formData
		}).then(function(res){
			$('#wu-datagrid-2').datagrid('reload');
			$('#wu-dialog-2').dialog('close');
		})
	}




	function deleUser(id){
		$.ajax({
			type:"delete",
			url:"http://localhost:3000/users/data/"+ id
		}).then(function(res){
			$('#wu-datagrid-2').datagrid('reload');
		});
	}
</script>